<template>
  <div class="bg_f container">
    <div class="input_box">
      <label for>交货方式</label>
      <div class="right_input">
        <picker
          @change="bindPickerChange"
          :value="(typeList[active].id)"
          :range-key="'name'"
          :range="typeList"
        >
          <input type="text" disabled v-model="typeList[active].name">
        </picker>
      </div>
    </div>
    <div class="input_box mt10">
      <label for>通知交货</label>
      <checkbox-group @change="checkboxChange">
        <label class="checkbox">
          <checkbox :value="1"/>
        </label>
      </checkbox-group>
      <label for>上门取货</label>
      <checkbox-group @change="ChangeDoor">
        <label class="checkbox">
          <checkbox :value="1"/>
        </label>
      </checkbox-group>
    </div>
    <div class="input_box mt10" v-if="form.isDoor">
        <label for>取货地址</label>
        <input type="text" class="right_input" placeholder="请输入取货详细地址" v-model="form.door" @blur="chage">
    </div>
  </div>
</template>
<script>
export default {
  props: ["text"],
  data() {
    return {
      typeList: [
        { name: "请选择", id: "0" },
        { name: "自提", id: "1" },
        { name: "送货", id: "2" },
        { name: "送货卸货", id: "3" },
        // { name: "市内收货", id: "1" },
        // { name: "司机直达", id: "2" },
        // { name: "送货", id: "3" },
        // { name: "送货上楼", id: "4" },
        // { name: "送货卸货", id: "5" },
        // { name: "网点直达", id: "6" },
        // { name: "自提", id: "7" }
      ],
      active: 0,
      form: {
        isDoor: "",
        notice: "",
        door: "",
        delivery: "0"
      }
    };
  },
  methods: {
    bindPickerChange(e) {
      var vD = e.target.value;
      this.active = vD;
      vD = Number(vD);
      this.form.delivery = vD;
      this.chage();
    },
    ChangeDoor(e) {
      this.form.isDoor = e.target.value[0];
      this.chage();
    },
    checkboxChange(e) {
      this.form.notice = e.target.value[0];
      this.chage();
    },
    chage() {
      console.log(this.form);
      this.$store.dispatch("setOrderData", { data: this.form });
    }
  }
};
</script>

<style scoped>
.container {
  padding: 15px;
  margin-top: 10px;
}
.input_box {
  display: flex;
  align-items: center;
  height: 45px;
}

.input_div {
  border: 1px solid #eee;
}

.right_input {
  border: 1px solid #eee;
  flex: 3;
}

.input_box input {
  padding: 5px;
  width: 100%;
}
.mt10 {
  margin-top: 10px;
}
.input_box label {
  margin-right: 10px;
}
</style>
